<!--
- Author:  Lgh.
- Date:    2017/3/4.
- File:    integral.vue.
-->
<template>
  <div class="Web_Box">
    <div class="integrat f-cb"><span>当前积分 ￥{{currentIntegral}}</span><a @click="gotoSpread" class="more">推荐用户购买</a></div>
    <div class="inter_tab" v-infinite-scroll="loadMoreIntegral"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <table width="100%" border="0">
        <tr>
          <th align="left">时间</th>
          <th align="center">收支类型</th>
          <th align="right">积分</th>
        </tr>
        <tr v-for="item in integral.data">
          <td>{{item.addtime | timestampToDate('yyyy-MM-dd')}} <p class="f12">{{item.addtime | timestampToDate('hh:mm:ss')}}</p></td>
          <td align="center" v-show="item.style == 1">购买生成积分</td>
          <td align="center" v-show="item.style == 2">下级购买生成积分</td>
          <td align="center" v-show="item.style == 3">购买使用积分</td>
          <td align="center" v-show="item.style == 4">取消订单返回积分</td>
          <td align="center" v-show="item.style == 5">退款返回积分</td>
          <td align="center" v-show="item.style == 6">换货返回使用的积分</td>
          <td align="center" v-show="item.style == 7">换货扣除赠送的积分</td>
          <td align="center" v-show="item.style == 8">下级换货扣除积分</td>
          <td align="center" v-show="item.style == 9">换货被拒返回积分</td>
          <td align="center" v-show="item.style == 10">下级换货被拒返回积分</td>
          <td align="center" v-show="item.style == 11">下级换货扣除积分</td>
          <td align="center" v-show="item.style == 12">取消换货返回积分</td>
          <td align="center" v-show="item.style == 13">下级取消换货返回积分</td>
          <td align="center" v-show="item.style == 14">换货返回使用积分</td>
          <td>
            <a class="fr">
            <span class="cr_45a73a vm" v-if="item.style == 1||item.style == 2||item.style == 4||item.style == 5||item.style == 6|| item.style == 9 || item.style == 10|| item.style == 12|| item.style == 13|| item.style == 14">+{{item.integral_value}}</span>
            <span class="cr_f60202 vm" v-if="item.style == 3||item.style == 7||item.style == 8 ||item.style == 11">-{{item.integral_value}}</span>
            <span class="vm pl20" @click="gotoOrderDetail(item)">查看</span>
            </a>
          </td>
        </tr>
      </table>
    </div>
    <empty-data :show="integral.allLoaded && integral.data.length <= 0" style="margin-top: 1.5rem"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>

  export default{
    data() {
      return {
        integral: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 15, data: []}
      }
    },
    components: {},
    created() {
      this.initIntegralList()
      this.getIntegralList(this.integral.page, this.integral.pageSize)
    },
    methods: {
      gotoSpread() {
        this.$router.push({name: 'member-spread'})
      },
      gotoOrderDetail(order) {
        let self = 'true'
        if (order.style == 2 || order.style == 8) {
          self = 'false'
        }
        this.$router.push({name: 'order-detail', params: {id: order.order_id}, query: {self: self}})
      },
      initIntegralList() {
        this.integral.requested = false
        this.integral.loading = false
        this.integral.allLoaded = false
        this.integral.page = 1
        this.integral.pageSize = 15
        this.integral.data = []
        this.currentIntegral = 0
      },
      getIntegralList(page, pageSize) {
        this.integral.loading = true
        this.$request.getIntegralList(page, pageSize).then(data => {
          this.currentIntegral = data.member_integral
          if (data.integral_list.length < this.integral.pageSize) {
            this.integral.allLoaded = true
          }
          this.integral.data = [...this.integral.data, ...data.integral_list]
        }).finally(() => {
          this.integral.requested = true
          this.integral.loading = false
        })
      },
      loadMoreIntegral() {
        if (this.integral.loading || this.integral.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getIntegralList(++this.integral.page, this.integral.pageSize)
        }, 500)
      }
    }
  }
</script>
